<!DOCTYPE html>
<html>
<head>
<title>getUserMedia Demo 2</title>
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
<script src="../../base/adapter.js"></script>
<style>
video {
    border:5px solid black;
    width:480px;
    height:360px;
}
canvas {
    border:5px solid black;
    width:480px;
    height:360px;
}
button {
  font: 18px sans-serif;
  padding: 8px;
}
</style>
</head>
<body>
<video id="vid" autoplay="true"></video>
<canvas id="cvs"></canvas>
<br>
<button id="btn1" onclick="start()">Start</button>
<button id="btn2" onclick="snap()">Snapshot</button>
<script>
video = document.getElementById("vid");
canvas = document.getElementById("cvs");
canvas.width = 480;
canvas.height = 360;
btn2.disabled = true;
function start() {
  navigator.getUserMedia({video:true}, gotStream, function() {});
  btn1.disabled = true;
}
function gotStream(stream) {
  attachMediaStream(video, stream);
  btn2.disabled = false
}
function snap() {
  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>

